<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
<template>
    <div>
        <el-form ref="goods" :model="formAdd" :rules="formAddValidate" label-width="120px" class="demo-ruleForm">
            <el-form-item label="奖品名称" prop="name">
                <el-input v-model="formAdd.name" placeholder="请输入奖品名称"></el-input>
            </el-form-item>
            <el-form-item label="奖品简称" prop="short_name">
                <el-input v-model="formAdd.short_name" placeholder="请输入奖品简称，2~5个字" @blur="widthCheck($event.target,10)"></el-input>
            </el-form-item>
            <el-form-item label="奖品图片" prop="img">
                <el-upload
                        ref="upload"
                        class="avatar-uploader"
                        :action="fileUpload"
                        :show-file-list="false"
                        :on-success="handleSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imgUrl" :src="imgUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="奖品类型" prop="type">
                <el-radio v-model="formAdd.type" label="1" border>单独的奖品</el-radio>
                <el-radio v-model="formAdd.type" label="2" border>选择种类</el-radio>
            </el-form-item>

            <div v-if="formAdd.type==='2'">
                <el-button type="primary" size="mini" @click="addArray">添加</el-button>
                <div v-for="(a,index) in arrayData" :key="index" style="display: flex;justify-content: flex-start;position: relative">
                    <el-form-item  label="名称" prop="goods">
                        <el-input v-model="a.name" placeholder="请输入名称"></el-input>
                    </el-form-item>
                    <el-form-item  label="库存" prop="goods">
                        <el-input v-model="a.stock" placeholder="请输入库存"></el-input>
                    </el-form-item>
                    <el-form-item  label="排序" prop="goods">
                        <el-input-number :min="1" :max="100" v-model="a.sort" placeholder="请输入排序"></el-input-number>
                    </el-form-item>
                    <el-form-item  >
                        <el-button type="danger" size="mini" @click="delArray(index)">删除</el-button>
                    </el-form-item>
                </div>
            </div>

            <el-form-item label="奖品介绍" prop="describe">
                <el-input v-model="formAdd.describe" type="textarea" :rows="5" placeholder="请输入奖品介绍"></el-input>
            </el-form-item>
            <el-form-item label="奖品数量" prop="stock">
                <el-input-number v-if="formAdd.type==='2'" v-model="formAdd.stock" disabled=""></el-input-number>
                <el-input-number v-else v-model="formAdd.stock" :min="1" :max="100000" style="width:300px;"></el-input-number>
            </el-form-item>
            <el-form-item label="中奖数量" prop="num">
                <el-input-number v-model="formAdd.num" :min="0" :max="10000" style="width:300px;"></el-input-number>
                <span>用户最大中奖的数量,0为不限制</span>
            </el-form-item>
            <el-form-item label="中奖概率" prop="probability">
                <el-input-number v-model="formAdd.probability"  style="width:300px;">
                    <template slot="append">整数</template>
                </el-input-number>
            </el-form-item>
            <el-form-item label="多少次之类必中" prop="max_num">
                <el-input-number v-model="formAdd.max_num" :min="0" :max="100000" style="width:300px;">
                    <template slot="append">次，0为不限制</template>
                </el-input-number>
            </el-form-item>
            <el-form-item label="是否需要信息" prop="is_get">
                <el-radio-group v-model="formAdd.is_get">
                    <el-radio :label="1">否</el-radio>
                    <el-radio :label="2">收货地址</el-radio>
                    <el-radio :label="3">手机号</el-radio>
                </el-radio-group>
                <span>是否要填写地址、手机等信息，比如谢谢惠顾之类就不需要</span>
            </el-form-item>
            <el-form-item label="是否中奖" prop="is_prize">
                <el-radio-group v-model="formAdd.is_prize">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="2">否</el-radio>
                </el-radio-group>
                <span>用户中了该项奖后，是否可以参与第二次抽奖</span>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
                <el-input-number v-model="formAdd.sort" :min="1" :max="10000" style="width:300px;"></el-input-number>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="goodsSubmit()">提交</el-button>
                <el-button @click="handreturn()">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import axios from "@/axios";
    import { getmd5, guid, yzMobile, yzPwd, getHeaders } from "@/assets/js/common";
    export default {
        name: "goods_add",
        data() {
            return {
                formAdd: {
                    name: "",
                    short_name: "",
                    img: "",
                    type: '1',
                    stock: "",
                    probability: "",
                    max_num: "",
                    num: 1,
                    is_get: 1,
                    is_prize: 1,
                    describe: "",
                    sort: 1
                },
                formAddValidate: {
                    name: [
                        {
                            required: true,
                            message: "奖品名称不能为空",
                            trigger: "change"
                        }
                    ],
                    short_name: [
                        {
                            required: true,
                            message: "奖品简称不能为空",
                            trigger: "change"
                        }
                    ],
                    stock: [
                        {
                            type: 'number',
                            required: true,
                            message: "奖品数量不能为空",
                            trigger: "change"
                        }
                    ],
                    describe: [
                        {
                            required: true,
                            message: "奖品介绍不能为空",
                            trigger: "change"
                        }
                    ],
                    probability: [
                        {
                            type: 'number',
                            required: true,
                            message: "中奖率不能为空",
                            trigger: "change"
                        }
                    ]
                },
                headers: {},
                base: {},
                imgUrl: "", // 图片路径
                credentials: true,
                fileUpload: "",
                goods_id:"",
                arrayData:[{
                    name:'',
                    stock:'',
                    sort:0
                }]
            }
        },
        mounted() {
            this.base = JSON.parse(sessionStorage.base);
            this.fileUpload = this.base.domain_name + "/api/file/upload";
            this.headers = getHeaders(localStorage._token);
            this.goods_id = this.$route.query.goods_id;
            if (this.goods_id) {
                this.goodsDetail();
            }
        },
        methods: {
            // 限制输入框输入的字符数
            widthCheck (str, len) {
                var temp = 0
                for (var i = 0; i < str.value.length; i++) {
                    if (/[\u4e00-\u9fa5]/.test(str.value[i])) {
                        temp += 2
                    } else {
                        temp++
                    }
                    if (temp > len) {
                        str.value = str.value.substr(0, i)
                    }
                }
            },
            //  数组删除
            delArray(index){
                if(this.arrayData.length == 1){
                    return
                }
                this.arrayData.splice(index,1)
            },
            //   数组添加
            addArray(){
                let params = {
                    name:'',
                    stock:'',
                    sort:0
                };
                let index = this.arrayData.length;
                this.$set(this.arrayData,index,params);
            },
            goodsDetail(){
                let vm = this;
                axios
                    .post("/admin/activity/goods/detail", {
                        goods_id:this.$route.query.goods_id
                    })
                    .then(response => {
                        let status = response.status;
                        let data = response.data;
                        if (data.code == 200) {
                            let result = data.data;
                            console.log(result);
                            vm.formAdd = result;
                            vm.formAdd.type = vm.formAdd.type + "";
                            vm.arrayData = result.goods;
                            vm.imgUrl = result.file ? result.file.path : '';
                        } else {
                            vm.$message.info(data.message);
                        }
                    })
                    .catch(error => {
                        // vm.$message.info("网络或服务器异常");
                    });
            },
            // 活动添加、编辑处理
            goodsSubmit() {
                let vm = this;
                vm.formAdd.activity_id = this.$route.query.activity_id;
                vm.formAdd.goods = this.arrayData;
                this.$refs.goods.validate(valid => {
                    if (valid) {
                        axios
                            .post("/admin/activity/goods/store", vm.formAdd)
                            .then(response => {
                                let status = response.status;
                                let data = response.data;
                                if (data.code == 200) {
                                    vm.$message({
                                        type: 'success',
                                        message: "添加成功!",
                                        onClose: function (msg) {
                                            vm.$router.push({
                                                path: "activity_goods?activity_id="+vm.$route.query.activity_id
                                            });
                                        }
                                    });
                                }else{
                                    vm.$message.error(data.message);
                                }
                            })
                            .catch(error => {
                                // console.log(error);
                                // vm.$message.error("网络或服务器异常");
                            });
                    } else {
                        // vm.$message.error("Fail!");
                    }
                });
            },
            //返回上一页
            handreturn() {
                this.$router.go(-1);
            },
            // 图片上传
            handleSuccess(res, file) {
                let vm = this;
                if (res.code == 200) {
                    this.imgUrl = res.img_path;
                    this.formAdd.img = res.file;
                } else {
                    vm.$message.error(res.message);
                }
            }
        }
    }
</script>

<style scoped>

</style>